<template>
  <div class="contents">
    <el-row :gutter="10" type="flex" align="middle" style="padding: 20px 0;">
		<el-col :span="6" class="content_first">
		  <span style="margin-right: 5px;white-space: nowrap;">商品：</span>
		  <el-input  clearable placeholder="请输入商品" v-model="listParams.productName"></el-input>
		</el-col>
      <el-col :span="6" class="content_first">
        <span style="margin-right: 5px;white-space: nowrap;">发货日期：</span>
        <el-date-picker type="date" placeholder="请选择日期" v-model="listParams.timeDelivery" value-format="yyyy-MM-dd"></el-date-picker>
      </el-col>
	  <el-col>
		<el-button type="primary" @click="search">查询</el-button>
	    <!-- <el-button>重置</el-button> -->
	  </el-col>
      <!-- <el-col :span="3">
        <el-cascader :options="typeData"></el-cascader>
      </el-col>
      <el-col :span="4">
        <el-select v-model="stores" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="1" style="text-align: center;">
        <span @click="togglePane">
          <el-image
            v-if="paneShow"
            style="width: 20px; height: 20px;"
            :src="require('../../assets/up.png')"
          ></el-image>
          <el-image
            v-else
            style="width: 20px; height: 20px;"
            :src="require('../../assets/down.png')"
          ></el-image>
        </span>
      </el-col> -->
      <!-- <el-col :span="8" >
        <el-checkbox>
          <span style="display: flex;">
            待采购商品
            <tooltip-msg
              messages="勾选后只显示有待采购量的商品"
              place="bottom"
            />
          </span>
        </el-checkbox>
        <el-checkbox >计算库存</el-checkbox>
        <el-checkbox>计算在途</el-checkbox>
          <el-checkbox>
            <span style="display: flex;">
              计算损耗
              <tooltip-msg
                messages="只有勾选计算损耗时商品生成采购单，才会根据损耗率计算采购需求;
                      计算的损耗率取对应的商品档案的实时损耗率;
                      待采购量 =（订单汇总-库存量-在途库存量）+（订单汇总-库存量-]
                      在途库存量）*商品损耗率;"
                place="left"
              ></tooltip-msg>
            </span>
        </el-checkbox>
      </el-col> -->
    </el-row>
    <!-- <div v-show="paneShow" style="margin: 8px 0;">
      <el-row
        :gutter="20"
        type="flex"
        align="middle"
        style="margin-bottom: 10px;"
      >
        <el-col :span="3">
          <el-select v-model="value" placeholder="全部时间段">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model="value" placeholder="选择线路">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-cascader :options="typeData" placeholder="采购类型"></el-cascader>
        </el-col>
        <el-col :span="14">
          <el-radio label="1">未发货</el-radio>
          <el-radio label="2">待收货</el-radio>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-bottom: 10px;">
        <el-col :span="3">
          <el-select v-model="value" placeholder="全部区域">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model="value" placeholder="订单来源">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入商品名称/编码/别名/关键字"></el-input>
        </el-col>
        <el-col :span="14"></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3" style="margin-bottom: 10px;">
          <el-select v-model="value" placeholder="选择客户类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col>
          <el-button>重置</el-button>
          <el-button type="success">确定</el-button>
        </el-col>
      </el-row>
    </div> -->

    <el-table
      ref="multipleTable"
      :data="tableData.list"
      tooltip-effect="dark"
      v-loading="listLoading"
      style="width: 100%;"
    >
      <!-- <el-table-column type="selection" width="55"></el-table-column> --> 
      <el-table-column label="商品" prop="product_name"></el-table-column>
      <!-- <el-table-column
        label="采购类型（采购员 / 供应商）"
        width="240"
      >
		<template slot-scope="scope">
			{{scope.row.purchaser_name || scope.row.supplier_name}}
		</template>
	  </el-table-column> -->
      <el-table-column label="订单数" prop="order_number"></el-table-column>
	  <el-table-column label="单位" prop="unit"></el-table-column>
      <el-table-column label="汇总量" prop="sum_qty"></el-table-column>
      <!-- <el-table-column label="库存量"></el-table-column>
      <el-table-column label="在途库存量"></el-table-column>
      <el-table-column label="待采购量"></el-table-column> -->
    </el-table>
		<div class="bottom-desc">
			<el-pagination background @current-change="currentChange" @size-change="sizeChange"
				layout="total, prev, pager, next,sizes" :page-size="tableData.pageSize"
				:page-sizes="[10,20, 30, 40, 50]" :total="tableData.total" />
		</div>
  </div>
</template>

<script>
  import TooltipMsg from '@/components/TooltipMsg.vue'
  import { getOrderSummary } from '@/api/order'
  export default {
    components: {
      TooltipMsg,
    },
    data() {
      return {
        tableData: [],
        listLoading: true,
        typeData: [],
        stores: '默认库房',
        options: [
          {
            value: '0',
            label: '默认库房',
          },
          {
            value: '1',
            label: '冻货库房',
          },
        ],
        value: '',
        paneShow: false,
		listParams:{
			size: 10,
			current: 1,
			timeDelivery:'',
			productName:''
		}
      }
    },
    created() {
	  var time = new Date();
	  this.listParams.timeDelivery = time.toLocaleDateString().replace(/\//g,'-')
	  this.getList()
    },
    methods: {
		interceptStr(box) {
		    var arr=[];
			var pos = box.indexOf('L');
			while(pos>-1){
				boxarr.push(pos);
				pos= box.indexOf('L',pos+1);
			}
		},
		search() {
			this.getList()
		},
		currentChange(e) {
			this.listParams.current = e
			this.getList()
		},
		sizeChange(e) {
			this.listParams.size = e
			this.getList()
		},
      async getList() {
		this.listParams.timeDelivery = this.listParams.timeDelivery?this.listParams.timeDelivery.replace(/(?<=-)0(?=\d)/g, ''):''
        this.listLoading = true
        const res = await getOrderSummary(this.listParams)
        this.tableData = res
        this.listLoading = false
      },
      togglePane() {
        this.paneShow = !this.paneShow
      },
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 0 20px 10px;
  }
  .el-pagination{
	  text-align: right !important;
  }
  .el-checkbox{
	  margin: 5px;
  }
  .content_first{
	  display: flex;
	  align-items: center;
  }
</style>
